import { Form, CustomEnum, FormPageItem, FormPageFormItem } from 'custom/index'
import { FormItemOption } from 'custom/custom/FormItem'

interface FormPageItemOption extends FormItemOption {
  span?: number
}
export default class FormPageGroup extends Form<FormPageFormItem> {
  public static name: CustomEnum = 'FormPageGroup';

  protected static props = {
    title: {
      type: String,
      default: ''
    }
  }

  public useItem(name: string | FormPageItemOption) {
    const option: FormPageItemOption = typeof name === 'string' ? { prop: name } : name
    const { tag, span, label, prop, rules, default: defaultValue, modelLabel, ...props } = option

    const itemBox = new FormPageItem(prop)
    itemBox._props.span = span || 24
    itemBox._props.label = label
    itemBox._props.prop = prop
    itemBox._props.rules = rules

    const item = new FormPageFormItem(prop || 'FormItem')
    item.setPropModel(prop, defaultValue, modelLabel)
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, props)

    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  /**
   * 创建一个只能输入数字或小数的表单项
   * 如果不是数字类型，将直接清空文本框
   * @param name 表单项名称或配置选项
   * @returns 返回FormPageFormItem实例
   */
  public useItem1(name: string | FormPageItemOption) {
    const option: FormPageItemOption = typeof name === 'string' ? { prop: name } : name
    const { tag, span, label, prop, rules, default: defaultValue, modelLabel, ...props } = option

    const itemBox = new FormPageItem(prop)
    itemBox._props.span = span || 24
    itemBox._props.label = label
    itemBox._props.prop = prop
    itemBox._props.rules = rules || [
      {
        validator: (rule: any, value: any, callback: any) => {
          if (value === '' || value === null || value === undefined) {
            callback()
          } else if (!/^-?\d*\.?\d*$/.test(value)) {
            callback(new Error('只能输入数字或小数'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]

    const item = new FormPageFormItem(prop || 'FormItem')
    item.setPropModel(prop, defaultValue, modelLabel)
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, {
      onInput: (value: string) => {
        // 如果不是有效的数字格式，则返回空字符串
        if (!/^-?\d*\.?\d*$/.test(value)) {
          return ''
        }
        return value
      },
      onBlur: (event: FocusEvent) => {
        const input = event.target as HTMLInputElement
        // 检查当前值是否符合数字格式
        if (input.value && !/^-?\d*\.?\d*$/.test(input.value)) {
          // 不符合格式则清空
          input.value = ''
          // 触发更新
          const inputEvent = new Event('input', { bubbles: true })
          input.dispatchEvent(inputEvent)
        }
      },
      ...props
    })

    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  /**
 * 创建一个多行文本框的表单项
 * @param name 表单项名称或配置选项
 * @returns 返回FormPageFormItem实例
 */
  public useItem2(name: string | FormPageItemOption) {
    const option: FormPageItemOption = typeof name === 'string' ? { prop: name } : name
    const { tag, span, label, prop, rules, default: defaultValue, modelLabel, ...props } = option

    const itemBox = new FormPageItem(prop)
    itemBox._props.span = span || 24
    itemBox._props.label = label
    itemBox._props.prop = prop
    itemBox._props.rules = rules

    const item = new FormPageFormItem(prop || 'FormItem')
    item.setPropModel(prop, defaultValue, modelLabel)
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, {
      type: 'textarea',
      autosize: { minRows: 3, maxRows: 6 }, // 自动调整高度，最小3行，最大6行
      placeholder: '请详细描述', // 默认提示文字
      ...props
    })

    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  /**
   * 创建一个只能输入手机号码的表单项
   * 如果不是有效的手机号码格式，将直接清空文本框
   * @param name 表单项名称或配置选项
   * @returns 返回FormPageFormItem实例
   */
  public useItem3(name: string | FormPageItemOption) {
    const option: FormPageItemOption = typeof name === 'string' ? { prop: name } : name
    const { tag, span, label, prop, rules, default: defaultValue, modelLabel, ...props } = option

    const itemBox = new FormPageItem(prop)
    itemBox._props.span = span || 24
    itemBox._props.label = label
    itemBox._props.prop = prop
    itemBox._props.rules = rules || [
      {
        validator: (rule: any, value: any, callback: any) => {
          if (value === '' || value === null || value === undefined) {
            callback()
          } else if (!/^1[3-9]\d{9}$/.test(value)) {
            callback(new Error('请输入有效的手机号码'))
          } else {
            callback()
          }
        },
        trigger: 'blur'
      }
    ]

    const item = new FormPageFormItem(prop || 'FormItem')
    item.setPropModel(prop, defaultValue, modelLabel)
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, {
      maxlength: 11, // 限制最大长度为11位
      onInput: (value: string) => {
        // 只允许输入数字
        const numValue = value.replace(/\D/g, '')
        // 如果长度超过11位，截取前11位
        return numValue.slice(0, 11)
      },
      onBlur: (event: FocusEvent) => {
        const input = event.target as HTMLInputElement
        // 检查当前值是否符合手机号格式
        if (input.value && !/^1[3-9]\d{9}$/.test(input.value)) {
          // 不符合格式则清空
          input.value = ''
          alert('请输入正确格式的手机号码');
          // 触发更新
          const inputEvent = new Event('input', { bubbles: true })
          input.dispatchEvent(inputEvent)
        }
      },
      ...props
    })

    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  public addItem(name: string | FormPageItemOption) {
    this.useItem(name)
    return this
  }

  public useRangeItem(option: FormItemOption<string[]>): FormPageFormItem {
    const { tag, prop, label, default: defaultValue, modelLabel, ...props } = option
    const itemBox = new FormPageItem(prop[0] || 'FormPageItem')
    itemBox._props.label = label
    itemBox._props.prop = prop[0]
    const item = new FormPageFormItem(prop[0] || 'FormPageFormItem')
    prop.forEach((p, index) => {
      const m = modelLabel || []
      const d = defaultValue || []
      item.setPropModel(p, d[index], m[index])
    })
    item.setComponent(tag || 'ElInput')
    Object.assign(item._props, props)
    itemBox.addChild(item)
    this.addChild(itemBox)
    return item
  }

  end() {
    return this.upto('FormPage')
  }
}
